<%--
  Created by IntelliJ IDEA.
  User: szw
  Date: 2021/2/23
  Time: 8:39 下午
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>$Title$</title>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.min.js"></script>

    <script>
        function startAjax() {
            /**
             * 学习 XMLHttpRequest API
             * 1. 构造函数： XMLHttpRequest()
             * 2. 属性：status，readyState，onreadystatechange
             * 3. 方法：open(method, url, async)，send()
             * /

             /**
             * 1. 用构造函数创建 Ajax 对象
             */
            const XHR = new XMLHttpRequest();
            /**
             * 2. 用 Ajax 对象的open方法初始化请求
             */
            XHR.open('GET', 'helloAjaxServlet', true);
            /**
             * 当请求发送（调用send方法）后，Ajax 对象的两个状态属性值（readyState和status）会发生改变
             * 此时会执行onreadystatechange的回调。
             * 3. 实现 onreadystatechange 的回调
             */
            /**
             * 4. 调用Ajax的 send() 方法发送请求
             */
            XHR.send();
            XHR.onreadystatechange = function () {
                if (XHR.readyState === XMLHttpRequest.DONE && XHR.status === 200) {
                    console.log(XHR.responseText)
                }
            }

        }

        function startAjax2() {
            const XHR = new XMLHttpRequest();
            XHR.open('GET', 'newsListServlet', true);
            XHR.send();
            XHR.onreadystatechange = function () {
                if (XHR.readyState === XMLHttpRequest.DONE) {
                    if (XHR.status === 200) {
                        alert('获取到的结果为：' + XHR.response)
                        console.log(XHR.response)
                        /* 通过XHR 对象的responseText属性获取后台传过来的JSON字符串 */
                        console.log(XHR.responseText)
                        let parse = JSON.parse(XHR.responseText);
                    }
                }
            }
        }

        function startAjax3() {
            $.ajax({
                "url": "newsListServlet",
                "type": "GET",
                // 可以是json
                "data": {"type": "NBA", "name": "rush"},
                // 可以是地址栏的方式
                // "data": "type=NBA&name=rush",
                "dataType": "json",
                "success": function (newsList) {
                    alert('参数传递完成！')
                    console.log(newsList)
                }
            });
        }

        function startAjax4() {
            $.ajax({
                "url": "newsListServlet",
                "type": "GET",
                "dataType": "json",
                // 服务器返回的数据，保存到参数中
                "success": function (newsList) {
                    alert('获取到的结果为：' + newsList)
                    console.log(newsList)
                    // const news = JSON.parse(newsList); // 如果dataType为text，则需要自己转。
                    console.log(newsList[0])
                    document.getElementById("container").innerHTML = "<h1>" + newsList[0].title + "</h1>"
                }
            });
        }

        function startAjax5() {
            $.ajax({
                "url": "newsListServlet-1",
                "type": "GET",
                "dataType": "json",
                "success": function (newsList) {
                    console.log(newsList)
                },
                "error": function (e) {
                    console.log('发生了错误')
                    console.log(e)
                }
            });
        }

        function startAjax6() {
            $.post(
                "newsListServlet",
                {"type": "NBA", "name": "rush"},
                function (newsList) {
                    for (let i = 0; i < newsList.length; i++) {
                        console.log(newsList[i])
                        $('#container').append("<h1>" + newsList[i].title + "</h1>")
                            .append("<h2>" + newsList[i].date + "</h2>")
                    }
                },
                "json"
            )
        }

    </script>
</head>
<body>
<button onclick="startAjax()">发起Ajax请求</button>
<br>
<button onclick="startAjax2()">发起Ajax请求，获取新闻列表JSON</button>
<br>
<button onclick="startAjax3()">通过jQuery发起Ajax请求，向后台传递参数</button>
<br>
<button onclick="startAjax4()">通过jQuery发起Ajax请求，获取新闻列表JSON</button>
<br>
<button onclick="startAjax5()">通过jQuery发起Ajax请求，处理错误</button>
<br>
<button onclick="startAjax6()">通过jQuery发起Ajax请求，$.get()</button>
<br>
<div id="container"></div>
</body>
</html>
